<template>
  <div class="box">
    <div class="content">
      <div v-for="item in tool" class="item" :key="item.id" @click="item.cb">
        <div class="raduis">
          <img :src="item.icon" alt="" />
        </div>
        <div class="title">{{ item.title }}</div>
      </div>
    </div>
    <!-- <el-checkbox
      label="仅测量模型(不拾取地形)"
      style="color: #fff; margin-top: 15px"
      @change="openOrHideTerrin"
    /> -->
    <!-- <darkInput
      v-model="input"
      title="单位"
      placeholder="自动"
      size="small"
      style="margin-top: 15px"
    /> -->
    <div
      ><el-button
        align="right"
        type="primary"
        style="
          margin-top: 15px;
          width: 146px;
          height: 40px;
          border-radius: 4px;
          opacity: 1;
          background: linear-gradient(90deg, #3f97f0 3%, #003f82 99%);
        "
        @click="clearSurvey"
        >清空测量数据</el-button
      ></div
    >
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { options_measure, options_analyse } from '../../../../js/test'

const input = ref('')
const tool = [
  {
    id: 1,
    title: '空间距离',
    icon: '/static/assets/3d/kjcl.png',
    cb: options_measure.空间距离
  },
  {
    id: 2,
    title: '贴地距离',
    icon: '/static/assets/3d/tdjl.png',
    cb: ()=> map3d.measureDis(true)
  },
  {
    id: 3,
    title: '刨面',
    icon: '/static/assets/3d/pm.png',
    cb: () => {
      map3d.depthTest(true);
      options_analyse.地形开挖()
    }
  },
  {
    id: 4,
    title: '水平面积',
    icon: '/static/assets/3d/spmj.png',
    cb: options_measure.水平面积
  },
  {
    id: 5,
    title: '贴地面积',
    icon: '/static/assets/3d/tdmj.png',
    cb: options_measure.贴地面积
  },
  {
    id: 6,
    title: '角度',
    icon: '/static/assets/3d/jd.png',
    cb: options_measure.角度
  },
  {
    id: 7,
    title: '高度差',
    icon: '/static/assets/3d/gdc.png',
    cb: options_measure.高度差
  },
  {
    id: 8,
    title: '三角测量',
    icon: '/static/assets/3d/sjcl.png',
    cb: options_measure.三角测量
  },
  {
    id: 9,
    title: '坐标测量',
    icon: '/static/assets/3d/zbcl.png',
    cb: options_measure.坐标测量
  },
    {
    id: 10,
    title: '方量分析',
    icon: '/static/assets/3d/flfx.png',
    cb: options_analyse.方量分析
  },
]
// const openOrHideTerrin = (e) => {
//   if (e) {
//     // 设置仅测量模型（不拾取地形）
//     viewer.scene.pickMode = Cesium.ScenePickMode.METRIC_ONLY
//   } else {
//     // 关闭仅测量模型，恢复正常拾取
//     viewer.scene.pickMode = Cesium.ScenePickMode.DEFAULT
//   }

//   // map3d.depthTest(e)
// }

const clearSurvey = () => {
  options_measure.清除测量();
  // map3d.clearDig();
  map3d.depthTest(false);
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
  align-items: center;
  justify-content: center;
  .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    // justify-content: space-around;
    font-size: 16px;
    .item:nth-of-type(3n) {
      margin-right: 0;
    }
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      width: 125px;
      padding: 10px 0;
      cursor: pointer;
      &:hover {
        background-color: #149ec98a;
        border-radius: 8px;
      }
    }

    .raduis {
      width: 68;
      height: 68;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .title {
      margin-top: 10px;
    }
  }
}
</style>